<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
 import {signFile} from '@/api/common'
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default Vue.extend({
    name:'vue-editor',
    components: { Editor, Toolbar },
    props:{
       htmlValue:String,
       default:''
    },
    data() {
        return {
            editor: null,
            html: '',
            toolbarConfig: {
              toolbarKeys:[
                'headerSelect',
                '|','bold',
                'italic',
                'color',
                'bgColor',
                'fontSize',
               {
            "key": "group-justify",
            "title": "对齐",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
            "menuKeys": [
                "justifyLeft",
                "justifyRight",
                "justifyCenter",
                "justifyJustify"
            ]
        },
        {
            "key": "group-indent",
            "title": "缩进",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
            "menuKeys": [
                "indent",
                "delIndent"
            ]
        },"bulletedList", // 无序列表
    "numberedList", // 有序列表
                'lineHeight',
                'fontFamily',
                'uploadImage',
                'uploadVideo',
                
              ] 
            },
            editorConfig: { 
              placeholder: '请输入内容...',
              MENU_CONF:{
                uploadImage:{
                  async customUpload(file, insertFn) {
                      const ossurl = 'https://s.xazyzx.com/'
                      const res = await signFile({name:file.name})
                      const signData = res.data.data
                      // ⽂件对象
                      const formData = new FormData()
                      if(res.data.code == 200){
                          formData.append("signature", signData.signature);
                          formData.append("name", signData.filename);
                          formData.append("policy", signData.policy);
                          formData.append("OSSAccessKeyId", signData.ossAccessKeyId);
                          formData.append("success_action_status", "200");
                          formData.append("key", signData.dir +'/'+ signData.filename);
                          formData.append('file', file)
                          fetch(signData.host, {
                            method: "POST",
                            body: formData,
                          }).then((response) => {
                            if (!response.ok) {
                              throw new Error("文件上传到OSS失败");
                            }else{
                              const path = ossurl + signData.dir +'/'+ signData.filename;
                              insertFn(path);
                            }
                          });
                      }else{
                        this.$message({
                          type: 'warning',
                          message: '服务端签名失败',
                        })
                      }
                  }
                },
                 uploadVideo:{
                  async customUpload(file, insertFn) {
                      const ossurl = 'https://s.xazyzx.com/'
                      const res = await signFile({name:file.name})
                      const signData = res.data.data
                      // ⽂件对象
                      const formData = new FormData()
                      if(res.data.code == 200){
                          formData.append("signature", signData.signature);
                          formData.append("name", signData.filename);
                          formData.append("policy", signData.policy);
                          formData.append("OSSAccessKeyId", signData.ossAccessKeyId);
                          formData.append("success_action_status", "200");
                          formData.append("key", signData.dir +'/'+ signData.filename);
                          formData.append('file', file)
                          fetch(signData.host, {
                            method: "POST",
                            body: formData,
                          }).then((response) => {
                            if (!response.ok) {
                              throw new Error("文件上传到OSS失败");
                            }else{
                              const path = ossurl + signData.dir +'/'+ signData.filename;
                              insertFn(path);
                            }
                          });
                      }else{
                        this.$message({
                          type: 'warning',
                          message: '服务端签名失败',
                        })
                      }
                  }
                },
            }
          },
            mode: 'default', // or 'simple'
        }
    },
    mounted(){
        
    },
    methods: {
       async uploadSectionFile(data)  {
        },
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    watch:{
      htmlValue:{
        deep:true,
         immediate:true,
         handler(htmlStr){
            if(htmlStr =='<p><br></p>'){
              this.html = ''
            }else{
               this.html = htmlStr
            }
         }
      },
       html:{
         deep:true,
         immediate:true,
         handler(htmlStr){
            if(htmlStr =='<p><br></p>'){
               this.$emit('resetHtml','')
            }else{
               this.$emit('resetHtml',htmlStr)
            }
           
         }
       }
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>